// 指令相关代码
import Vue from 'vue'

// 注册一个全局自定义指令 'v-focus'
Vue.directive('focus', {
  // 当指令自动插入到DOM中，自动触发指令
  // 当指令所在元素插入到真实 dom 中 自动触发 (触发一次)
  inserted: function (el) {
    // console.log(el.tagName)
    // if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) {
    //   el.focus()
    // } else {
    //   let node = el.querySelector('input')
    //   if (node) {
    //     node.focus()
    //     return
    //   }
    //   node = el.querySelector('textarea')
    //   if (node) {
    //     node.focus()
    //     return
    //   }
    //   throw new Error('请把focus指令用在input或textarea上')
    // }
    jujiao(el)

    // 原来的写法
    // const els = document.getElementById('inp')
    // els.focus()
    // console.log(els)
  },
  // 防止缓存导致的无法再次聚焦的问题
  // 当指令所在元素数据更新的时候 自动触发 (只要数据遍历，每次都会触发)
  update (el) {
    // if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) {
    //   el.focus()
    // } else {
    //   let node = el.querySelector('input')
    //   if (node) {
    //     node.focus()
    //     return
    //   }
    //   node = el.querySelector('textarea')
    //   if (node) {
    //     node.focus()
    //     return
    //   }
    //   throw new Error('请把focus指令用在input或textarea上')
    // }
    jujiao(el)
  }
})
function jujiao (el) {
  if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) {
    el.focus()
  } else {
    let node = el.querySelector('input')
    if (node) {
      node.focus()
      return
    }
    node = el.querySelector('textarea')
    if (node) {
      node.focus()
      return
    }
    throw new Error('请把focus指令用在input或textarea上')
  }
}
